<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GDP 数据可视化</title>
    <!-- 引入 ECharts 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 ECharts 统计扩展 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
    <style>
        #phonemonthvalue {
            margin: 20px auto;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 指定容器 -->
    <div id="phonemonthvalue" style="width: 800px; height: 700px;"></div>

    <script>
        // 注册回归转换器
        echarts.registerTransform(ecStat.transform.regression);

        // 初始化图表
        const myChart = echarts.init(document.getElementById('phonemonthvalue'));

        // 配置项
        const option = {
            dataset: [
                {
                    source: [
                        [1, 4862.4],
                        [2, 5294.7],
                        [3, 5934.5],
                        [4, 7171.0],
                        [5, 8964.4],
                        [6, 10202.2],
                        [7, 11962.5],
                        [8, 14928.3],
                        [9, 16909.2],
                        [10, 18547.9],
                        [11, 21617.8],
                        [12, 26638.1],
                        [13, 34634.4],
                        [14, 46759.4],
                        [15, 58478.1],
                        [16, 67884.6],
                        [17, 74462.6],
                        [18, 79395.7]
                    ]
                },
                {
                    transform: {
                        type: 'ecStat:regression',
                        config: {
                            method: 'exponential',
                            // 可添加其他参数：
                            // order: 2,      // 多项式阶数
                            // formulaOn: 'start' // 公式显示位置
                        }
                    }
                }
            ],
            title: {
                text: '1981-1998 年国内生产总值 GDP (亿元)',
                subtext: '指数回归分析 - 数据来源：国家统计局',
                left: 'center',
                textStyle: {
                    fontSize: 18
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                formatter: params => {
                    return `第 ${params[0].value[0]} 年<br/>GDP: ${params[0].value[1].toLocaleString()} 亿元`;
                }
            },
            grid: {
                top: '15%',
                bottom: '15%'
            },
            xAxis: {
                type: 'value',
                name: '年份序列',
                nameLocation: 'middle',
                nameGap: 25,
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: 'GDP (亿元)',
                scale: true,
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                },
                axisLabel: {
                    formatter: value => value.toLocaleString()
                }
            },
            series: [
                {
                    name: '实际数据',
                    type: 'scatter',
                    datasetIndex: 0,
                    symbolSize: 8,
                    itemStyle: {
                        color: '#5470C6'
                    }
                },
                {
                    name: '回归曲线',
                    type: 'line',
                    datasetIndex: 1,
                    smooth: true,
                    symbolSize: 0.1,
                    lineStyle: {
                        color: '#EE6666',
                        width: 3
                    },
                    label: {
                        show: true,
                        fontSize: 14,
                        formatter: ({ value }) => `y = ${value[1].toExponential(2)}`
                    }
                }
            ]
        };

        // 应用配置
        myChart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', () => myChart.resize());
    </script>
</body>
</html>